<template>
	<view class="index">
        <view style="padding: 60rpx;position: relative;overflow: hidden">
            <view class="" style="font-size: 48rpx;color: white;">
                入驻店铺
                <br>
                获得海量曝光
            </view>
            <view style="color: rgba(255,255,255,0.6)">
                供应商入驻
            </view>
            <view>
                <image src="http://img.pighack.com/20220318230338bcf1a8701.png" style="width: 630rpx;position: absolute;bottom:-240rpx;right: -120rpx" mode="widthFix"></image>
            </view>
        </view>

		<view class="certification" style="height: 100%">

            <form @submit="formSubmit" @reset="formReset">
				<view class="certification_head">
					<view class="certification_head_body">
						<view class="certification_head_body_item">
							<view style="font-size: 32rpx;width: 25%">
                                店铺名称
                            </view>
							<input type="text" name="store_name" v-model="form.store_name" placeholder='请输入店铺名称' />
						</view>

                        <view class="certification_head_body_item">
                            <view style="font-size: 32rpx;width: 25%">
                                主营项目
                            </view>
                            <view class="fsc" style="display: flex;width: 75%" @click="pickshow=true">
                                <input  disabled type="text" name="password" v-model="classify_data_name_active"  placeholder='请选择您店铺的主营项目' />
                                <u-icon name="arrow-down"></u-icon>
                            </view>
                        </view>

                        <u-picker :range="classify_data_name" mode="selector" v-model="pickshow"   @confirm="changeSelect()"></u-picker>

                        <input style="display:none" name="business_id" v-model="form.business_id" />
                        <Upload v-if="isupload" :isupload="isupload" :type="type" @getImgs="getImgsFunc">上传图片</Upload>
                        <view class="certification_head_body_item" style="align-items: flex-start">
                            <view style="font-size: 32rpx;width: 25%">
                                营业执照
                            </view>
                            <view @click="openUpload('license')">
                                <view v-if="business_id_path!=''" class="img">
                                    <image :src="business_id_path" style="width: 200rpx;" mode="widthFix"></image>
                                </view>
                                <view v-if="business_id_path==''">

                                    <image src="/static/images/shop/upload.png" style="width: 200rpx;" mode="widthFix"></image>

                                </view>
                            </view>
                        </view>

						<view class="certification_head_body_item" style="margin-top: 130rpx">
                            <view style="font-size: 32rpx;width: 25%">
                                姓名
                            </view>
							<input type="text" name="user_name" v-model="form.user_name" placeholder='请输入真实姓名' />
						</view>
						<view class="certification_head_body_item">
                            <view style="font-size: 32rpx;width: 25%">
                                手机号
                            </view>
							<input type="text" name="mobile" v-model="form.mobile" placeholder='请输入手机号码' />
							<button style="background-color: white;color: #C9C9C9;font-size: 24rpx" type="default"  v-if="sms_open == 1" :disabled="is_send" @click="getCode(form.mobile)">{{send_btn_txt}}</button>
						</view>
                        <view class="certification_head_body_item" v-if="sms_open == 1">
                            <view style="font-size: 32rpx;width: 25%">
                                验证码
                            </view>
                            <input type="text" name="code" v-model="form.code" placeholder='请输入验证码' />
                        </view>
						<view class="certification_head_body_item">
                            <view style="font-size: 32rpx;width: 25%">
                                密码
                            </view>
							<input type="text" name="password" v-model="form.password" password="true" placeholder='请输入登录密码' />
						</view>






					</view>
				</view>
				<!--<view class="certification_body">
					<view class="login_index_updata_name">
						<text style="color:red;">*</text>
						<text style="font-size: 32rpx;font-weight: 500;color: #000000;">请上传营业执照</text>
					</view>
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('license')">
							<view class="login_index_updata_updata_item_body">
								<view v-if="business_id_path!=''" class="img">
									<image :src="business_id_path"></image>
								</view>
								<view v-if="business_id_path==''">点击上传营业执照</view>
								<input style="display:none" name="business_id" v-model="form.business_id" />
							</view>
						</view>
					</view>
				</view>-->
				<view class="login_index_btn ">
					<button form-type="submit" type="default">确定</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import Upload from '@/components/upload/upload';
	export default {
		components: {
			/*编辑组件*/
			Upload
		},
		onShow() {
			/*获取个人中心数据*/
			this.getData();
		},
		data() {
			return {
				form: {
					image_frontid: 0,
					business_id: 0,
					mobile: '',
					password: ''
				},
				isupload: false,
				type: 'frontid',
				image_frontid_path: '',
				business_id_path: '',
				bg_image: '',
				classify_data_name: '', //列表名字
				classify_data_id: '', //列表id
				classify_data_name_active: '', //当前选中的列表名字
				classify_data_id_active: '', //当前选中的列表id
				/*当前秒数*/
				second: 60,
				send_btn_txt: '获取验证码',
				/*是否已发验证码*/
				is_send: false,
				sms_open: 0,
                pickshow:false
			}
		},
		onShow() {
			this.get_classify();
		},
		methods: {
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + '秒';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = '获取验证码';
					this.second = 60;
					this.is_send = false;
				}
			},
			/*获取数据*/
			getData() {
				let self = this;
				self._get('user.index/detail', {

				}, function(res) {
					self.bg_image = res.data.setting.supplier_image;
				});
			},
			//获取验证码
			getCode(mobile) {
				let self = this;
				self._post('purveyor.apply/sendCode', {
					mobile: mobile
				}, function(res) {
					self.is_send = true;
					self.changeMsg();
				});
			},
			//获取分类
			get_classify() {
				let self = this;
				self._post('purveyor.apply/category', {

				}, function(res) {
					let list_name = [];
					let list_id = [];
					//合成select列表
					for (var i = 0; i < res.data.list.length; i++) {
						list_name.push(res.data.list[i].name);
					}
					//合成上传所需id数组
					for (var i2 = 0; i2 < res.data.list.length; i2++) {
						list_id.push(res.data.list[i2].category_id);
					}
					self.classify_data_name = list_name;
					self.classify_data_id = list_id;
					self.sms_open = res.data.sms_open;
				});
			},
			//选择分类
			select() {
				let self = this;
				uni.showActionSheet({
					itemList: self.classify_data_name,
					success: function(res) {
						self.classify_data_name_active = self.classify_data_name[res.tapIndex];
						self.classify_data_id_active = self.classify_data_id[res.tapIndex];
					},
					fail: function(res) {

					}
				});
			},
			/*提交*/
			formSubmit: function(e) {
				let self = this;
				var formdata = e.detail.value;
				formdata.category_id = self.classify_data_id_active;
				if (self.classify_data_name_active == '') {
					uni.showToast({
						title: '请填主营类别',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.store_name == '') {
					uni.showToast({
						title: '请输入店铺名称',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.business_id == 0) {
					uni.showToast({
						title: '请上传营业执照',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.user_name == '') {
					uni.showToast({
						title: '请输入真实姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.mobile == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.code == '' && self.sms_open == 1) {
					uni.showToast({
						title: '请填写验证码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.password == '') {
					uni.showToast({
						title: '请填写登录密码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
				if (!reg.test(formdata.mobile)) {
					uni.showToast({
						title: '手机号码格式不正确',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: '正在提交',
					mask: true
				})
				self._post('purveyor.apply/index', formdata, function(res) {
					self.showSuccess(res.msg, function() {
						self.gotoPage('/pagesShop/shop/application_status')
					}, null, function(){
						uni.hideLoading();
					});
				});
			},
			/*上传*/
			openUpload(e) {
				this.type = e;
				this.isupload = true;
			},

			/*获取图片*/
			getImgsFunc(e) {
				console.log(e)
				if (e != null && e.length > 0) {
					if (this.type == 'frontid') {
						console.log(e[0].file_id);
						this.image_frontid_path = e[0].file_path;
						this.form.image_frontid = e[0].file_id;
					} else if (this.type == 'license') {
						console.log(e[0].file_id);
						this.business_id_path = e[0].file_path;
						this.form.business_id = e[0].file_id;
					}
				}
				this.isupload = false;
			},
			/* 下拉框 */
			changeSelect(e) {
				this.classify_data_id_active = this.classify_data_id[e[0]];
				this.classify_data_name_active = this.classify_data_name[e[0]];
			},
		}
	}
</script>

<style>
	page {
        background-color: #F63E36;

	}

	.bg_image image{
		width: 100%;
		height: 1200rpx;
	}
	.iconfont {
		font-size: 48rpx;
	}

	.index {
		width: 750rpx;
	}

	.certification {
		margin: 0 auto;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding: 30rpx;
		background-color: white;
	}

	.certification_head {
		width: 100%;
	}

	.certification_head_body {
		width: 100%;
	}

	.certification_head_body_item {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx !important;
	}

	.certification_head_body_item view {
		margin-right: 10rpx;
	}

	/*.certification_head_body_item button {
		width: 172rpx;
		height: 56rpx;
		line-height: 56rpx;
		border: 1rpx #E2231A solid;
		border-radius: 40rpx;
		font-size: 26rpx;
		color: #E2231A;
		padding: 0 20rpx;
	}*/

	.certification_body {}

	.login_index_updata_name {
		margin-top: 28rpx;
		margin-left: 48rpx;
	}

	.login_index_updata_updata {
		width: 90%;
		height: 360rpx;
		margin: 0 auto;
		margin-top: 35rpx;
	}

	.login_index_updata_updata_item2 {
		width: 100%;
		height: 360rpx;
		border: 1rpx #9a9a9a dotted;
		border-radius: 15rpx;
		text-align: center;
		
	}

	.login_index_updata_updata_item_body {
		width: 150rpx;
		height: 360rpx;
		text-align: center;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img image {
		width: 554rpx;
		height: 360rpx;
		position: relative;
	}

	.login_index_btn {
		position: relative;
		top: 30rpx;
		margin-bottom: 30rpx;
	}

	.login_index_btn button {
		width: 90%;
		height: 100rpx;
		background-color: #F63E36;
		border-radius: 50rpx;
		line-height: 100rpx;
		margin: 0 auto;
		color: white;
		font-size: 30rpx;
	}

	.certification_rule {
		position: relative;
		left: 500rpx;
		top: -10rpx;
	}

	.certification_rule text {
		color: #8a8a8a;
	}

	.certification_rule image {
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
	}

	.classify_text {
		color: #808080;
		margin-left: 40rpx;
	}

	.select input {
		padding-left: 60rpx;
		color: #808080;
	}
	.make-item{
		padding-left: 60rpx;
	}
</style>
